<template>
  <div>
    <div style="min-height: 100vh; background-color: #F8FAFD">
      <a-row class="a-dmpTalent-core-profile-profilePage">
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="profile_info">
            <div class="a-dmpTalent-core-profile-c-profile-card">
              <div class="Card">
                <div class="card_top">
                  <a-row>
                    <a-col span="10">
                      <div class="avatar_upload">
                        <img :src="lvyue" class="avatar" title="吕越">
                      </div>
                    </a-col>
                    <a-col span="14">
                      <div class="base_info_block">
                        <div class="name">吕越</div>
                        <div class="tool">
                          <span class="link" title="86-130-5116-6190"><my-icon type="icon-dianhua" class="link_icon"/></span>&nbsp;&nbsp;&nbsp;
                          <span class="link" title="nklvyue@126.com"><my-icon type="icon-youjian" class="link_icon"/></span>&nbsp;&nbsp;&nbsp;
                          <span class="link" ><my-icon type="icon-erweima" class="link_icon"/></span>
                        </div>
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="expert_content">
                  <div class="content">
                    <div class="c_info" title="对外经济贸易大学全球创新与治理研究院执行院长">对外经济贸易大学全球创新与治理研究院执行院长</div>
                    <div class="c_info" title="对外经济贸易大学国际经济贸易学院教授、博导">对外经济贸易大学国际经济贸易学院教授、博导</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="all_info">
              <div class="resumeCard">
                <div class="card_title">
                  <span class="title_text">
                    职称职位
                  </span>
                  <div class="title_right" @click="title_show(1)">
                    <a-icon type="caret-up" v-if="!titleFlag_zc"/>
                    <a-icon type="caret-down" v-if="titleFlag_zc"/>
                  </div>
                </div>
                <div class="toggle-content">
                  <div class="card_content" v-if="titleFlag_zc">
                    <div class="content_text" title="国家“万人计划”青年拔尖人才">国家“万人计划”青年拔尖人才</div>
                    <div class="content_text" title="社科基金重大项目首席专家">社科基金重大项目首席专家</div>
                    <div class="content_text" title="对外经济贸易大学杰出学者">对外经济贸易大学杰出学者</div>
                    <div class="content_text" title="对外经济贸易大学国际战略投资研究中心执行主任">对外经济贸易大学国际战略投资研究中心执行主任</div>
                  </div>
                </div>
              </div>
              <div class="resumeCard">
                <div class="card_title">
                  <span class="title_text">
                    社会兼职
                  </span>
                  <div class="title_right" @click="title_show(2)">
                    <a-icon type="caret-up" v-if="!titleFlag_jz"/>
                    <a-icon type="caret-down" v-if="titleFlag_jz"/>
                  </div>
                </div>
                <div class="card_content" v-if="titleFlag_jz">
                  <div class="content_text" title="全国高校国际贸易学科协作组青年论坛副秘书长">全国高校国际贸易学科协作组青年论坛副秘书长</div>
                  <div class="content_text" title="新兴经济体研究会理事">新兴经济体研究会理事</div>
                  <div class="content_text" title="商务部国际贸易杂志社学术委员会副主任">商务部国际贸易杂志社学术委员会副主任</div>
                  <div class="content_text" title="商务部中国国际贸易学会专家委员会委员">商务部中国国际贸易学会专家委员会委员</div>
                  <div class="content_text" title="南京大学长江产经研究院特聘专家">南京大学长江产经研究院特聘专家</div>
                  <div class="content_text" title="中央财经大学丝路金融研究中心特聘研究员">中央财经大学丝路金融研究中心特聘研究员</div>
                  <div class="content_text" title="《西安交通大学学报（社会科学版）》青年编委">《西安交通大学学报（社会科学版）》青年编委</div>
                  <div class="content_text" title="《产经评论》副主编">《产经评论》副主编</div>
                  <div class="content_text" title="《Digital Economy and Sustainable Development》编委">《Digital Economy and Sustainable Development》编委</div>
                  <div class="content_text" title="《Journal of WTO and China》编委">《Journal of WTO and China》编委</div>
                </div>
              </div>
              <div class="resumeCard">
                <div class="card_title">
                  <span class="title_text">
                    工作经历
                  </span>
                  <div class="title_right" @click="title_show(3)">
                    <a-icon type="caret-up" v-if="!titleFlag_work"/>
                    <a-icon type="caret-down" v-if="titleFlag_work"/>
                  </div>
                </div>
                <div class="card_content" v-if="titleFlag_work">
                  <div class="content_text" title="2019.12-至今 对外经济贸易大学教授（破格）">2019.12-至今&nbsp;&nbsp;对外经济贸易大学教授（破格）</div>
                  <div class="content_text" title="2019.12-至今 对外经济贸易大学博士生导师">2019.12-至今&nbsp;&nbsp;对外经济贸易大学博士生导师</div>
                  <div class="content_text" title="2017.12-2019.12 对外经济贸易大学副教授">2017.12-2019.12&nbsp;&nbsp;对外经济贸易大学副教授</div>
                  <div class="content_text" title="2014.08-2017.12 对外经济贸易大学助理研究员">2014.08-2017.12&nbsp;&nbsp;对外经济贸易大学助理研究员</div>
                </div>
              </div>
              <div class="resumeCard">
                <div class="card_title">
                  <span class="title_text">
                    教育经历
                  </span>
                  <div class="title_right" @click="title_show(4)">
                    <a-icon type="caret-up" v-if="!titleFlag_edu"/>
                    <a-icon type="caret-down" v-if="titleFlag_edu"/>
                  </div>
                </div>
                <div class="card_content" v-if="titleFlag_edu">
                  <div class="content_text" title="2016/02-2017/02	新加坡国立大学	东亚研究所	访问学者">2016/02-2017/02	新加坡国立大学	东亚研究所	访问学者</div>
                  <div class="content_text" title="2013/09-2014/06	美国哥伦比亚大学	商学院	富布赖特联培博士">2013/09-2014/06	美国哥伦比亚大学	商学院	富布赖特联培博士</div>
                  <div class="content_text" title="2009/09-2014/06	南开大学	经济学院国际经济研究所	经济学博士">2009/09-2014/06	南开大学	经济学院国际经济研究所	经济学博士</div>
                  <div class="content_text" title="2005/09-2009/07	南开大学	经济学院经管法试点班	经济、法学双学士  ">2005/09-2009/07	南开大学	经济学院经管法试点班	经济、法学双学士  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="center_info">
            <div class="a-dmpTalent-core-profile-research-interest">
              <div class="title"><span>研究兴趣</span></div>
              <div ref="researchCharts" style="height: 200px; width: 100%;"></div>
            </div>
            <div class="a-dmpTalent-core-profile-papers">
              <h2 class="part_title">
              <span class="title-box ">
                <span class="title">
                  <span>
                    成果
                  </span>
                </span>
                <span class="num">
                  共 84 篇
                </span>
              </span>
              </h2>
              <div style="position: relative;">
                <div class="part_content">
                  <div class="opr_line">
                    <a-radio-group v-model="radioData" button-style="solid">
                      <a-radio-button value="a">
                        按年份排序
                      </a-radio-button>
                      <a-radio-button value="b">
                        按引用量排序
                      </a-radio-button>
                      <a-popover placement="bottom">
                        <template slot="content">
                          <a-checkbox-group @change="YyOnChange" slot="overlay">
                            <a-checkbox value="A">
                              全球价值链
                            </a-checkbox><br/>
                            <a-checkbox value="B">
                              对外贸易
                            </a-checkbox><br/>
                            <a-checkbox value="C">
                              贸易与金融
                            </a-checkbox>
                          </a-checkbox-group>
                        </template>
                        <a-radio-button value="c">
                          按主题筛选<a-icon type="down" />
                        </a-radio-button>
                      </a-popover>
                      <a-popover placement="bottom">
                        <template slot="content">
                          <a-checkbox-group @change="ZtOnChange" slot="overlay">
                            <a-checkbox value="A">
                              王孝松
                            </a-checkbox><br/>
                            <a-checkbox value="B">
                              盛斌
                            </a-checkbox><br/>
                            <a-checkbox value="C">
                              陆毅
                            </a-checkbox>
                          </a-checkbox-group>
                        </template>
                        <a-radio-button value="d">
                          按合作者筛选<a-icon type="down" />
                        </a-radio-button>
                      </a-popover>
                    </a-radio-group>
                  </div>
                  <div class="list_item">
                      <div class="item" v-for="item in fruitData">
                        <div class="item_title">{{item.fruitName}}</div>
                        <div class="item_author">{{item.fruitAuthor}}</div>
                        <div class="item_org_date">{{item.fruitOrg}}{{item.fruitDate}}</div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="right_part">
            <div class="title"><span>作者统计</span></div>
            <div ref="authorCharts" style="height: 200px; width: 100%;"></div>
            <div>
              <span class="title-box ">
                <a-tabs default-active-key="1">
                  <a-tab-pane key="1" tab="合作学者">
                    <div class="list_c" v-for="item in coAuthorData">
                      <a-row>
                        <a-col span="4">
                          <span class="link" >
                            <template v-if="!item.authorImg">
                              <my-icon type="icon-touxiang" class="link_icon"/>
                            </template>
                            <template v-else>
                                 <img :src="item.orgImg" />
                            </template>
                          </span>
                        </a-col>
                        <a-col span="14">
                          <div class="item_t">{{item.authorName}}</div>
                          <div class="item_c">{{item.orgName}}</div>
                        </a-col>
<!--                        <a-col span="6">-->
<!--                          <div class="item_c">合作次数</div>-->
<!--                          <div class="item_d">{{item.coNum}}</div>-->
<!--                        </a-col>-->
                      </a-row>
                    </div>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="合作机构" force-render>
                    <div class="list_c" v-for="item in coOrgData">
                      <a-row>
                        <a-col span="4">
                          <span class="link" >
                            <template v-if="!item.orgImg">
                              <my-icon type="icon-xuexiao" class="link_icon"/>
                            </template>
                            <template v-else>
                               <img :src="item.orgImg" />
                            </template>
                          </span>
                        </a-col>
                        <a-col span="14">
                          <div class="item_t">{{item.orgEnName}}</div>
                          <div class="item_c">{{item.orgCnName}}</div>
                        </a-col>
                        <a-col span="6">
                          <div class="item_d">合作次数</div>
                          <div class="item_d">{{item.coNum}}</div>
                        </a-col>
                      </a-row>
                    </div>
                  </a-tab-pane>
                </a-tabs>
              </span>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>

import lvyueImg from '/public/static/photo.png';
import * as echarts from "echarts";


export default {
    name: 'TalentMenu',
    data() {
        return {
          isMobile: false,
          lvyue: lvyueImg,
          titleFlag_zc: true,
          titleFlag_jz: true,
          titleFlag_work: true,
          titleFlag_edu: true,
          researchChartsData: [
            {
              "yearNum": "2024",
              "name": "全球价值链",
              "count": 3
            },
            {
              "yearNum": "2024",
              "name": "国际贸易理论与政策",
              "count": 2
            },
            {
              "yearNum": "2024",
              "name": "“一带一路”倡议",
              "count": 2
            },
            {
              "yearNum": "2024",
              "name": "贸易与金融",
              "count": 1
            },
            {
              "yearNum": "2023",
              "name": "全球价值链",
              "count": 2
            },
            {
              "yearNum": "2023",
              "name": "国际贸易理论与政策",
              "count": 2
            },
            {
              "yearNum": "2023",
              "name": "“一带一路”倡议",
              "count": 2
            },
            {
              "yearNum": "2023",
              "name": "贸易与金融",
              "count": 2
            },
            {
              "yearNum": "2022",
              "name": "全球价值链",
              "count": 2
            },
            {
              "yearNum": "2022",
              "name": "国际贸易理论与政策",
              "count": 3
            },
            {
              "yearNum": "2022",
              "name": "“一带一路”倡议",
              "count": 2
            },
            {
              "yearNum": "2022",
              "name": "贸易与金融",
              "count": 2
            },
            {
              "yearNum": "2021",
              "name": "全球价值链",
              "count": 1
            },
            {
              "yearNum": "2021",
              "name": "国际贸易理论与政策",
              "count": 1
            },
            {
              "yearNum": "2021",
              "name": "“一带一路”倡议",
              "count": 1
            },
            {
              "yearNum": "2021",
              "name": "贸易与金融",
              "count": 1
            },
            {
              "yearNum": "2020",
              "name": "全球价值链",
              "count": 1
            },
            {
              "yearNum": "2020",
              "name": "国际贸易理论与政策",
              "count": 3
            },
            {
              "yearNum": "2020",
              "name": "“一带一路”倡议",
              "count": 1
            },
            {
              "yearNum": "2020",
              "name": "贸易与金融",
              "count": 1
            },
            {
              "yearNum": "2019",
              "name": "全球价值链",
              "count": 1
            },
            {
              "yearNum": "2019",
              "name": "国际贸易理论与政策",
              "count": 1
            },
            {
              "yearNum": "2019",
              "name": "“一带一路”倡议",
              "count": 0
            },
            {
              "yearNum": "2019",
              "name": "贸易与金融",
              "count": 1
            },
          ],
          radioData: "a",
          fruitData: [
            {
              "fruitName": "“贸易壁垒与全球价值链嵌入——以中国遭遇反倾销为例的经验研究”",
              "fruitAuthor": "王孝松、吕越、赵春明",
              "fruitOrg": "《中国社会科学》",
              "fruitDate": "2017年第1期"
            },
            {
              "fruitName": "“外国直接投资对中国环境的影响——来自工业行业面板数据的实证研究”",
              "fruitAuthor": "盛斌、吕越",
              "fruitOrg": "《中国社会科学》",
              "fruitDate": "2012年第5期"
            },
            {
              "fruitName": "“电商平台与制造业企业创新——兼论数字经济和实体经济深度融合的创新驱动路径”",
              "fruitAuthor": "吕越、陈泳昌、张昊天、诸竹君",
              "fruitOrg": "《经济研究》",
              "fruitDate": "2023年第8期"
            },
            {
              "fruitName": "“双重电商平台出口的规模效应与中间品效应——兼论新发展格局下两个市场的利用”",
              "fruitAuthor": "吕越、洪俊杰、陈泳昌、高恺琳",
              "fruitOrg": "《经济研究》",
              "fruitDate": "2022年第8期"
            },
            {
              "fruitName": "“一带一路” 倡议的对外投资促进效应——基于2005-2016 年中国企业绿地投资的双重差分检验”",
              "fruitAuthor": "吕越、陆毅、吴嵩博、王勇",
              "fruitOrg": "《经济研究》",
              "fruitDate": "2019年第9期"
            },
            {
              "fruitName": "“制造业服务化与价值链升级”",
              "fruitAuthor": "刘斌、魏倩、吕越、祝坤福",
              "fruitOrg": "《经济研究》",
              "fruitDate": "2016年第3期"
            },
            {
              "fruitName": "“金融市场分割、信贷失衡与中国制造业出口”",
              "fruitAuthor": "罗伟、吕越",
              "fruitOrg": "《经济研究》",
              "fruitDate": "2015年第10期"
            },
            {
              "fruitName": "“共建“一带一路”取得的重大成就与经验”",
              "fruitAuthor": "吕越、马明会、李杨",
              "fruitOrg": "《管理世界》",
              "fruitDate": "2022年第10期"
            },
            {
              "fruitName": "“全球价值链下的中国企业“产品锁定”破局：基于产品多样性视角的经验证据”",
              "fruitAuthor": "吕越、邓利静",
              "fruitOrg": "《管理世界》",
              "fruitDate": "2020年第8期"
            },
            {
              "fruitName": "“嵌入全球价值链导致中国制造的“低端锁定”吗？”",
              "fruitAuthor": "吕越、陈帅、盛斌",
              "fruitOrg": "《管理世界》",
              "fruitDate": "2018年第8期"
            },
            {
              "fruitName": "“全球价值链下的企业贸易网络和出口国内附加值”",
              "fruitAuthor": "吕越、尉亚宁",
              "fruitOrg": "《世界经济》",
              "fruitDate": "2020年第12期"
            },
            {
              "fruitName": "“外资对中国参与全球价值链分工的影响”",
              "fruitAuthor": "罗伟、吕越",
              "fruitOrg": "《世界经济》",
              "fruitDate": "2019年第5期"
            },
            {
              "fruitName": "“全球价值链嵌入的生产率效应：影响与机制分析”",
              "fruitAuthor": "吕越、黄艳希、陈勇兵",
              "fruitOrg": "《世界经济》",
              "fruitDate": "2017年第7期"
            },
            {
              "fruitName": "“异质性企业与全球价值链嵌入：基于效率和融资的视角”",
              "fruitAuthor": "吕越、罗伟、刘斌",
              "fruitOrg": "《世界经济》",
              "fruitDate": "2015年第8期"
            },
            {
              "fruitName": "“企业上游度、贸易危机与价值链传导的长鞭效应”",
              "fruitAuthor": "吕越、罗伟、包群",
              "fruitOrg": "《经济学（季刊）》",
              "fruitDate": "2020年第3期"
            }
          ],
          coAuthorData:[
            {
              authorImg: "",
              authorName: "Bin Sheng (盛斌)",
              orgName: "School of Economics, Nankai University",
              coNum: "10"
            },
            {
              authorName: "Xudong Zhou (周旭东)",
              orgName: "",
              coNum: "6"
            }
          ],
          coOrgData:[
            {
              orgImg: "",
              orgEnName: "University of International Business and Economics",
              orgCnName: "对外经济贸易大学",
              coNum: "56"
            },
            {
              orgImg: "https://lfs.aminer.cn/misc/aicityorg/Shanghai%20University%20of%20Finance%20and%20Economics.jpg",
              orgEnName: "Shanghai University of Finance and Economics",
              orgCnName: "上海财经大学",
              coNum: "6"
            },
          ]

        }
    },
    computed: {},
    mounted() {
      this.checkMobile(); // 初始化时进行一次判断
    },
    created(){
      window.addEventListener('resize', this.checkMobile);
      this.$nextTick(()=>{
        this.getResearchChartsData();
        this.getAuthorChartsData();
      })
    },
    methods: {
      // 添加判断方法
      checkMobile() {
        this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
        console.log("-----------"+this.isMobile)
      },
      title_show(type){
        switch (type){
        case 1:
          this.titleFlag_zc = !this.titleFlag_zc;
          break;
        case 2:
          this.titleFlag_jz = !this.titleFlag_jz;
          break;
        case 3:
          this.titleFlag_work = !this.titleFlag_work;
          break;
        case 4:
          this.titleFlag_edu = !this.titleFlag_edu;
          break;
        }
      },
      YyOnChange(){

      },
      ZtOnChange(){

      },
      getResearchChartsData() {
        let url = "/getTalentResearchTrends";

        this.isHaveData = false;
        // postAction(url, { id: this.selectedAuthorId }).then(res => {
        //   if (res.data.success) {
        //     let data = res.data.result;
            let data = this.researchChartsData;
            let legendData = [];
            let seriesData = [];
            for(let n in data){
              let result = [];
              result[0] = data[n].yearNum;
              result[1] = data[n].count;
              result[2] = data[n].name;
              legendData.push(data[n].name);
              seriesData.push(result);
            }
            this.buildResearchCharts(Array.from(new Set(legendData)), seriesData);
          // }
        // }).catch(err => {
        //   console.log(err)
        // })
      },
      buildResearchCharts(legendData, seriesData){
        let researchCharts = echarts.init(this.$refs.researchCharts);
        researchCharts.setOption({

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: 'rgba(0,0,0,0.2)',
                width: 1,
                type: 'solid'
              }
            }
          },
          legend: {
            data: legendData
          },
          singleAxis: {
            top: 50,
            bottom: 50,
            axisTick: {},
            axisLabel: {},
            type: 'time',
            axisPointer: {
              animation: true,
              label: {
                show: true
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                opacity: 0.2
              }
            }
          },
          series: [
            {
              type: 'themeRiver',
              emphasis: {
                itemStyle: {
                  shadowBlur: 20,
                  shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
              },
              label: {
                show: false
              },
              data: seriesData
            }
          ]
        })
        setTimeout(function () {
          researchCharts.resize();
        }, 10)
      },
      getAuthorChartsData() {
        let url = "/getTalentResearchTrends";

        this.isHaveData = false;
        // postAction(url, { id: this.selectedAuthorId }).then(res => {
        //   if (res.data.success) {
        //     let data = res.data.result;
            let data = this.researchChartsData;
            let legendData = [];
            let seriesData = [];
            for(let n in data){
              let result = [];
              result[0] = data[n].yearNum;
              result[1] = data[n].count;
              result[2] = data[n].name;
              legendData.push(data[n].name);
              seriesData.push(result);
            }
            this.buildAuthorCharts(Array.from(new Set(legendData)), seriesData);
          // }
        // }).catch(err => {
        //   console.log(err)
        // })
      },
      buildAuthorCharts(legendData, seriesData){
        let authorCharts = echarts.init(this.$refs.authorCharts);
        authorCharts.setOption({
          color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
          radar: [
            {
              indicator: [
                { text: '内参' },
                { text: '论文' },
                { text: '期刊' },
                { text: '报刊媒体' },
                { text: '科研项目' }
              ],
              radius: 60,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              axisName: {
                formatter: '【{value}】',
                color: '#428BD4'
              },
              splitArea: {
                areaStyle: {
                  color: ['#033B75', '#033B75', '#033B75', '#033B75'],
                  shadowColor: 'rgba(0, 0, 0, 0.2)',
                  shadowBlur: 10
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(211, 253, 250, 0.8)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(211, 253, 250, 0.8)'
                }
              }
            },
          ],
          series: [
            {
              type: 'radar',
              emphasis: {
                lineStyle: {
                  width: 4
                }
              },
              data: [
                {
                  value: [23, 48, 92, 25, 45],
                  areaStyle: {
                    color: 'rgba(255, 228, 52, 0.6)'
                  }
                }
              ]
            }
          ]
        })
        setTimeout(function () {
          authorCharts.resize();
        }, 10)
      },
    }
}
</script>

<style lang="less" scoped>

  ::-webkit-scrollbar{
    width: 3px;
  }
  ::-webkit-scrollbar-track{
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb{
    background: #D8D8D8;
    border-radius: 4px;
  }
  .a-dmpTalent-core-profile-profilePage {
    //padding-left: 15px;
    //padding-right: 30px;
    max-width: 1440px;
    margin: 0 auto 30px;

   .profile_info {
      padding: 0 20px;
      min-width: 350px;
      background-color: #fff;
      margin-top: 40px;
      border-radius: 8px 0 0 8px;
    }

   .center_info {
      background-color: #fff;
      margin-right: 15px;
    }
  }
  .a-dmpTalent-core-profile-c-profile-card {
    padding-top: 20px;
    .Card {
      --avatar_size: 100px;
      --avatar_outer: 129px;
      width: 100%;
      background: #f7f8fc;
      border-radius: 24px;
      box-shadow: 0 1px 3px 0 rgba(158, 158, 167, .7);

      .card_top {
        background: @primary-color;
        border-radius: 24px 24px 0 0;
        padding: 17px 18px 15px;
        color: #fff;
      }

      .avatar_upload {
        width: var(--avatar_size);
        height: var(--avatar_size);
        border-radius: 22px;
        overflow: hidden;
        z-index: 3;

        img {
          width: 100%;
          z-index: 2;
        }
      }

      .base_info_block {
        height: 100px;
        .name{
          font-size: 1.5em;
          font-weight: 900;
          color: #fff;
          text-align: center;
          line-height: 50px;
        }
        .tool {
          display: flex;
          justify-content: center;
          padding-top: 10px;
          .link{
            border: 1px solid #fff;
            border-radius: 50%;
            cursor: pointer;
          }
          .link_icon{
            font-size: 20px;
            margin: 5px;
          }
        }
      }

      .expert_content {
        z-index: 2;
        width: 100%;
        .content {
          font-size: 15px;
          padding: 10px;
          text-align: left;
          .c_info{
            display: block;
            margin-top: 10px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 25px;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .all_info {
    margin-top: -10px;
    padding-bottom: 10px;
    border-left: 1px dashed #ccc;
    .resumeCard {
      padding: 20px 12px 0 12px;
      position: relative;
      .card_title {
        font-size: 16px;
        color: #373737;
        font-weight: 700;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid  @primary-color;
        .title_text {
          height: 28px;
          color:  @primary-color;
          position: relative;
          display: flex;
          align-items: center;
        }
        .title_text:before {
          content: "";
          margin-left: -14px;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: #9da8eb;
          position: absolute;
        }
        .title_right{
          cursor: pointer;
        }
      }
      .card_content{
        line-height: 30px;
        font-size: 15px;
        max-height: 120px;
        overflow-y: auto;
        .content_text{
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .a-dmpTalent-core-profile-research-interest{
    background-color: #fff;
    color: #000e28;
    padding-top: 20px;
    margin-top: 40px;
    .title{
      height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      line-height: 35px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
    }
  }

  .a-dmpTalent-core-profile-papers{
    .part_title {
      border: none !important;
      background: #f8fafd !important;
      .title-box {
        padding: 2px 16px;
        cursor: pointer;
        white-space: nowrap;
        border-right: 1px solid #eee;
        text-align: center;

        .title {
          font-size: 14px;
          font-weight: 700;
          opacity: 1;
        }
        .title span {
          font-size: 16px;
          color: @primary-color;
        }
      }
      .num {
        font-size: 12px;
        color: @primary-color;
        margin-left: 5px;
      }
    }
    .part_content{
      padding: 0 22px;
      .opr_line {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 12px 0 0;
        align-items: flex-start;
      }
      .list_item{
        .item{
          position: relative;
          padding: 20px 0 14px;
          top: -2px;
          flex-grow: 1;
          width: calc(100% - 49px);
          line-height: 18px;
          border-bottom: 1px dashed #d5d5d5;
          width: 100%;
          .item_title{
            font-weight: 700;
            font-size: 15px;
            line-height: 24px;
            vertical-align: middle;
          }
          .item_author{
            max-height: 40px;
            line-height: 20px;
            overflow: hidden;
            font-size: 12px;
          }
          .item_org_date {
             color: #444;
             font-size: 13px;
             line-height: 28px;
           }
        }
      }
    }
  }
  .right_part{
      margin-top: 40px;
      margin-right: 15px;
      background-color: #fff;
      align-self: flex-start;
      border-radius: 8px;
      padding: 20px 20px 0 20px;
      .title{
        color: #000e28;
        font-weight: 600;
        font-size: 15px;
        line-height: 35px;
        display: flex;
        justify-content: space-between;
      }
      .title-box {
        cursor: pointer;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        opacity: 1;
      }
      .title-box span {
        font-size: 16px;
        color: @primary-color;
      }
      .list_c{
        padding: 15px 10px 15px 10px;
        border-bottom: 1px dashed #eee;
        .link{
          border: 2px solid #033B75;
          border-radius: 50%;
          cursor: pointer;
          font-size: 30px;
        }
        .link img{
          height: 40px;
          width: 40px;
          border-radius: 50%;
          margin-bottom: 10px;
        }
        .link_icon{
          margin: 5px;
        }
      }
      .item_t {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
      }
      .item_c {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        text-align: left;
        padding: 0 5px;
      }
      .item_d {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        text-align: center;
        padding: 0 5px;
      }
      /deep/.ant-tabs-nav-scroll{
        background: #f8fafd !important;
      }
  }
</style>
